@import '_demo02';
.header {
    span {
        color: red;
        &:active {
            color: aqua;
        }
        &:hover {
            color: bisque;
        }
    }
}

//  scss的变量批量修改颜色
//  $ziti-Colo: #222;
//  $bti-str: '取消';
.headerziti {
    color: $ziti-Colo;
    font-family: $bti-str;
}

.bodyziti {
    color: $ziti-Colo;
}

@mixin wbty($width, $height) {
    color: azure;
    width: $width;
    height: $height;
    size: 0ch;
}

.classtohead {
    @include wbty(100px, 100px);
}

.classtobody {
    @include wbty(200px, 200px);
}

//响应式
@mixin ipad {
    @media screen and (min-width: 768px) {
        //@content 把@include ipad里面的内容全部加载出来。
        @content;
    }
}

.headers {
    @include ipad {
        width: 500px;
        color: red;
    }
}

.bodys {
    @include ipad {
        width: 500px;
    }
}

//  总结：写样式之前，按颜色分类//  总结：写样式之前，按颜色分类//  总结：写样式之前，按颜色分类//  总结：写样式之前，按颜色分类